<!DOCTYPE html>
<html>
  <head>
    <META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no">
    <title>Photo Booth</title>
    <style>
    body{
      margin: 0;
      padding: 0;
    }
    </style>
    <script src="./build/build.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
  </body>
    <script>
    var ika = require('akirakazu-ika');
    var PhotoBooth = require('photobooth');
    
    var scene = ika.easySetup();
    NotificationReceiver.emit('startRender');
    
    var photobooth = new PhotoBooth();
    scene.add(photobooth);
    ika.utils.centralize(scene, photobooth);
    ika.utils.draggable(photobooth);
    
    photobooth.on('ready', function() {
      this.play();
    });
    photobooth.init();
    
    var list = new ika.Listbase().init();
    
    function createInputGroup(efName) {
      var group = new ika.Group().init();
      var text = new ika.Label()
      .init()
      .attr('value', efName)
      .css('background-color', 'transparent')
      .css('font-size', 15)
      .attr('height', 40)
      .attr('width', 120);
      var sw = new ika.Switch()
      .init()
      .attr('x', 119)
      .attr('y', 5);
      group.add(text);
      group.add(sw);
      sw.on('change', function(value) {
        if (value === 'on') {
          photobooth.enableEffect(efName);
          list.children.iterate(function(group) {
            group.children.iterate(function(item) {
              if (item === sw) {
                return;
              }
              if (item.status === 'on') {
                item.click();
              }
            });
          });
        } else {
          photobooth.disableEffect(efName);
        }
      });
      return group;
    }
    
    photobooth.effectLists.forEach(function(efName) {
      var group = createInputGroup(efName);
      list.add(group);
    });
    
    var maxHeight = scene.height - 60;
    if (list.getBound().height > maxHeight) {
      var scroll = new ika.Scroll()
      .init()
      .attr('width', 200)
      .attr('height', maxHeight)
      .attr('x', 30)
      .attr('y', 30);
      scroll.add(list);
      scene.add(scroll);
    } else {
      list.attr('x', 30)
      .attr('y', 30);
      scene.add(list);
    }
    
    var snapshot = new ika.Button().init();
    snapshot.attr('value', 'snapshot')
    .attr('x', scene.width - snapshot.width - 30)
    .attr('y', 30);
    scene.add(snapshot);
    snapshot.on('click', function() {
      var _canvas = document.createElement('canvas');
      var bound = photobooth.getBound();
      _canvas.width = bound.width;
      _canvas.height = bound.height;
      
      var idata = scene.ctx.getImageData(bound.x, bound.y, bound.width, bound.height);
      _canvas.getContext('2d').putImageData(idata, 0, 0);
      window.open(_canvas.toDataURL());
    });
    </script>
</html>